
@keyframes spinsun {
  0% { transform: rotate(0); }
  100%   { transform: rotate(-360deg); }
}
@keyframes shadow {
  0% { background-position: 130% 0%; }
  33%{ background-position: 50% 0%; }
  55% { background-position: 0% 0%; }
  80%{ background-position: -50% 0%; }
  100%{ background-position: -50% 0%; }
}
@keyframes orbitmercury {
  0% { z-index:2; transform: rotateY(0); }
  49% { z-index:2; }
  50% { z-index:-2; }
  99% { z-index:-2; }
  100%   { z-index:2; transform: rotateY(360deg); }
}
@keyframes orbitvenus {
  0% { z-index:3; transform: rotateY(0); }
  49% { z-index:3; }
  50% { z-index:-3; }
  99% { z-index:-3; }
  100%   { z-index:3; transform: rotateY(360deg); }
}
@keyframes orbitearth {
  0% { z-index:4; transform: rotateY(0); }
  49% {z-index:4;}
  50% {z-index:-4;}
  99% {z-index:-4;}
  100%   { z-index:4; transform: rotateY(360deg);}
}
@keyframes orbitmars {
  0% { z-index:5; transform: rotateY(0); }
  49% { z-index:5; }
  50% { z-index:-5; }
  99% { z-index:-5; }
  100%   { z-index:5; transform: rotateY(360deg); }
}
@keyframes orbitjupiter {
  0% { z-index:6; transform: rotateY(270); }
  49% { z-index:6; }
  50% { z-index:-6; }  
  99% { z-index:-6; }
  100%   { z-index:6; transform: rotateY(360deg); }
}
@keyframes orbitsaturn {
  0% { z-index:7; transform: rotateY(270); }
  49% { z-index:7; }
  50% { z-index:-7; }
  99% { z-index:-7; }
  100%   { z-index:7; transform: rotateY(360deg); }
}
/* Keep planet image flat */
@keyframes anti-spin {
  from { transform: rotateY(0); }
  to   { transform: rotateY(-360deg); }
}
@keyframes anti-spin-rings {
  from { transform: rotateY(0) rotateX(73deg); }
  to   { transform: rotateY(-360deg) rotateX(73deg); }
}
        
@keyframes fadeIn {
  0% {opacity: 0;}
  75% {opacity: 0.8;}
  100% {opacity: 1;}
}
         
/* scene wrapper */
.wrapper{
  position:fixed;
  perspective: 5000px;
  perspective-origin: 60% 50%;
  margin-top: 2vh;
  width: inherit;
  opacity:0;
  padding:0;
}

.wrapper > div {
  position: relative;
  margin: 0 auto;
  transform-style: preserve-3d;
  height: 0px;
}
.sun {
  width: 250px;
  position: absolute;
  top: 0px;
  z-index: 1;
  height: 125px !important;
}
.sun .star {
  width: 150px;
  height: 150px;
  background: url($sun_image) no-repeat;
  background-size: cover;
  border-radius: 250px;
  margin: 0 auto;
  animation: spinsun $solar_speed*40s infinite linear;
}
.planet {
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  animation-iteration-count: infinite;
  overflow:hidden;
}
.shadow {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: transparent url($shadow_image) 0% 0% no-repeat;
  background-size: cover;
  border-radius: 100%;
}
.mercury {
  position: absolute;
  width: 300px;
  z-index:2;
  animation: orbitmercury $solar_speed*12s infinite linear;
  top: -7.5px; /*half of planets height to keep orbits in line*/
}
.mercury .planet {
  width:25px;
  height:25px;
  background-image: url($mercury_image);
  animation: anti-spin $solar_speed*12s infinite linear;
}
.mercury .shadow {
  animation: shadow $solar_speed*12s infinite linear;
}
.venus {
  position: absolute;
  width: 506px;
  z-index:3;
  animation: orbitvenus $solar_speed*15s infinite linear;
  top: -19px;
}
.venus .planet {
  width:48px;
  height:48px;
  background-image: url($venus_image);
  animation: anti-spin $solar_speed*15s infinite linear;
}
.venus .shadow {
  animation: shadow $solar_speed*15s infinite linear;
}
.earth {
  position: absolute;
  width: 610px;
  z-index:4;
  animation: orbitearth $solar_speed*20s infinite linear;
  top: -20px;
}
.earth .planet {
  width:50px;
  height:50px;
  background-image: url($earth_image);
  animation: anti-spin $solar_speed*20s infinite linear;
}
.earth .shadow {
  animation: shadow $solar_speed*20s infinite linear;
}
.mars {
  position: absolute;
  width: 706px;
  z-index:5;
  animation: orbitmars $solar_speed*30s infinite linear;
  top: -11px;
}
.mars .planet {
  width:32px;
  height:32px;
  background-image: url($mars_image);
  animation: anti-spin $solar_speed*30s infinite linear;
}
.mars .shadow {
  animation: shadow $solar_speed*30s infinite linear;
}
.jupiter {
  position: absolute;
  width: 1100px;
  z-index:6;
  animation: orbitjupiter $solar_speed*50s infinite linear;
  top: -64px;
  
}
.jupiter .planet {
  width:110px;
  height:110px;
  background-image: url($jupiter_image);
  animation: anti-spin $solar_speed*50s infinite linear;
}
.jupiter .shadow {
  animation: shadow $solar_speed*50s infinite linear;
}


.banner
    height: 30vh
    width: 100%
    margin: 0
    padding-top: 1%
    color: $color-lightest;
    text-align: center
    background: $color-background;

.blogtitel
    position: absolute;
    top: 20vh
    width: 100%
    margin: 0
    padding: 2%
    color: $color-lightest;
    text-align: center
    font-size: 40px
    font-family: $font-family-body
    font-weight: 700;
